// src/routes/index.tsx
import React, { lazy, Suspense, FC } from "react";
import { useRoutes } from "react-router-dom";

import type { XRoutes } from "./types";
import { HomeOutlined ,DiffOutlined,UserOutlined,AlertOutlined,SwitcherOutlined,WalletFilled,TagFilled,FunnelPlotFilled,CodepenSquareFilled,AppstoreFilled} from "@ant-design/icons";

import {
  Layout,
  EmptyLayout,
  CompLayout
} from "../layouts";
import Loading from "@comps/Loading";
import Redirect from "@comps/Redirect";

const Login = lazy(() => import("@pages/login"));
const Dashboard = lazy(() => import("@pages/dashboard"));
const NotFound = lazy(() => import("@pages/404"));
const User = lazy(() => import("@pages/acl/user"));
const Role = lazy(() => import("@pages/acl/role"));
const Permission = lazy(() => import("@pages/acl/peimission"));
const Trademark = lazy(() => import("@pages/product/trademark"));
const Attr = lazy(() => import("@pages/product/attr"));
const Spu = lazy(() => import("@pages/product/spu"));
const Sku = lazy(() => import("@pages/product/sku"));

const load = (Comp: FC) => {
  return (
    // 因为路由懒加载，组件需要一段网络请求时间才能加载并渲染
    // 在组件还未渲染时，fallback就生效，来渲染一个加载进度条效果
    // 当组件渲染完成时，fallback就失效了
    <Suspense fallback={<Loading />}>
      {/* 所有lazy的组件必须包裹Suspense组件，才能实现功能 */}
      <Comp />
    </Suspense>
  );
};

const routes: XRoutes = [
  {
    path: "/",
    element: <EmptyLayout />,
    children: [
      {
        path: "login",
        element: load(Login),
      },
    ],
  },
  {
    path: "/syt",
    element: <Layout />,
    children: [
      {
        path: "/syt/dashboard",
        meta: { icon: <HomeOutlined />, title: "首页" },
        element: load(Dashboard),
      },
      // 权限管理
      {
        path: "/syt/acl",
        element: load(CompLayout),
        name: "Acl",
        meta: {
          icon: <AlertOutlined />,
          title: "权限管理"
        },
        children: [
          {
            path: "/syt/acl/user",
            element: load(User),
            name: "User",
            meta: {
              icon: <UserOutlined />,
              title: "用户管理"
            }
          },
          {
            path: "/syt/acl/role",
            element: load(Role),
            name: "Role",
            meta: {
              icon: <SwitcherOutlined />,
              title: "角色管理"
            }
          }, {
            path: "/syt/acl/permission",
            element: load(Permission),
            name: "Permission",
            meta: {
              icon: <DiffOutlined />,
              title: "菜单管理"
            }
          }
        ]

      },
      // 商品管理
      {
        path: "/syt/product",
        element: load(CompLayout),
        name: "Product",
        meta: {
          icon: <AppstoreFilled />,
          title: "商品管理"
        },
        children: [
          {
            path: "/syt/product/trademark",
            element: load(Trademark),
            name: "Trademark",
            meta: {
              icon: <CodepenSquareFilled />,
              title: "品牌管理"
            }
          },
          {
            path: "/syt/product/attr",
            element: load(Attr),
            name: "Attr",
            meta: {
              icon: <FunnelPlotFilled />,
              title: "平台属性管理"
            }
          }, {
            path: "/syt/product/spu",
            element: load(Spu),
            name: "Spu",
            meta: {
              icon: <TagFilled />,
              title: "SPU管理"
            }
          }, {
            path: "/syt/product/sku",
            element: load(Sku),
            name: "Sku",
            meta: {
              icon: <WalletFilled />,
              title: "SKU管理"
            }
          }
        ]
      },
    ],
  },

  {
    path: "/404",
    element: load(NotFound),
  },
  {
    path: "*",
    element: <Redirect to="/404" />,
  },
];

// 渲染路由
// 注意：首字母必须大写
export const RenderRoutes = () => {
  // react-router-dom的新增语法。不用自己遍历了，它帮我们遍历生成
  return useRoutes(routes);
};

// 找到要渲染成左侧菜单的路由
export const findSideBarRoutes = () => {
  const currentIndex = routes.findIndex((route) => route.path === "/syt");
  return routes[currentIndex].children as XRoutes;
};

export default routes;
